<template>
    <div id="discount">
        <!--头部-->
        <div class="head">
            <span class="iconfont" onclick="javascript :history.go(-1);">&#xe602;</span>
            <div class="title-img">
                <a href="/">
                    <img src="./images/header_title.png" alt="">
                </a>
            </div>
        </div>

        <el-row :gutter="2" class="sel-box">
            <el-col :span="8">
                <el-select v-model="cityValue" placeholder="加盟区域" clearable>
                    <el-option-group
                            v-for="group in city"
                            :key="group.label"
                            :label="group.label">
                        <el-option
                                v-for="item in group.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-option-group>
                </el-select>
            </el-col>
            <el-col :span="8">
                <el-select v-model="moneyValue" clearable placeholder="投资金额">
                    <el-option
                            v-for="item in money"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="8">
                <el-select v-model="projectValue" placeholder="加盟类目" clearable>
                    <el-option-group
                            v-for="group in project"
                            :key="group.label"
                            :label="group.label">
                        <el-option
                                v-for="item in group.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-option-group>
                </el-select>
            </el-col>
        </el-row>


        <div class="content-box">
            <!--顶部图片-->
            <div class="top-img w">
                <a href="javascript:void(0);">
                    <img src="./images/top_img.png" alt="">
                </a>
            </div>

            <!--热门项目-->
            <div class="hot">
                <!--标题-->
                <ul class="hot-title w">
                    <li>
                        热门项目
                    </li>
                </ul>
                <!--内容-->
                <ul class="hot-cont">
                    <li class="w">
                        <img src="./images/hot01.png" alt="">
                        <div class="r-cont clearfix">
                            <h2 class="">韩巴巴炸鸡店</h2>
                            <span>外卖</span>
                            <span>堂食</span>
                            <p>所属分类：<i>炸鸡</i></p>
                            <p><img src="./images/money.png" alt=""><i>5~10万</i></p>
                            <p>月资讯人数：<i>242</i>人</p>
                            <a href="javascript:void(0);">询底价</a>
                        </div>
                    </li>
                    <li class="w">
                        <img src="./images/hot02.png" alt="">
                        <div class="r-cont clearfix">
                            <h2 class="">暖小稻</h2>
                            <span>外卖</span>
                            <span>堂食</span>
                            <p>所属分类：<i>黄焖鸡</i></p>
                            <p><img src="./images/money.png" alt=""><i>5~10万</i></p>
                            <p>月资讯人数：<i>242</i>人</p>
                            <a href="javascript:void(0);">询底价</a>
                        </div>
                    </li>
                    <li class="w">
                        <img src="./images/hot03.png" alt="">
                        <div class="r-cont clearfix">
                            <h2 class="">灶掌柜</h2>
                            <span>外卖</span>
                            <span>堂食</span>
                            <span>现炒</span>
                            <p>所属分类：<i>家常菜</i></p>
                            <p><img src="./images/money.png" alt=""><i>5~10万</i></p>
                            <p>月资讯人数：<i>242</i>人</p>
                            <a href="javascript:void(0);">询底价</a>
                        </div>
                    </li>
                    <li class="w">
                        <img src="./images/hot04.png" alt="">
                        <div class="r-cont clearfix">
                            <h2 class="">湘口福酸菜鱼</h2>
                            <span>外卖</span>
                            <span>米饭</span>
                            <p>所属分类：<i>酸菜鱼</i></p>
                            <p><img src="./images/money.png" alt=""><i>5~10万</i></p>
                            <p>月资讯人数：<i>242</i>人</p>
                            <a href="javascript:void(0);">询底价</a>
                        </div>
                    </li>
                </ul>
                <a href="javascript:void(0);" class="load-more">加载更多项目</a>
            </div>
        </div>
        <foot></foot>

    </div>
</template>

<script>

    import foot from "@/components/foot/foot"

    export default {
        name: "Discount",
        data() {
            return {
                city: [
                    {
                        label: '热门城市',
                        options: [
                            {
                                value: 'Shanghai',
                                label: '上海'
                            },
                            {
                                value: 'Beijing',
                                label: '北京'
                            },
                            {
                                value: 'Guangzhou',
                                label: '广州'
                            },
                        ]
                    },
                    {
                        label: '城市名',
                        options: [{
                            value: 'Chengdu',
                            label: '成都'
                        },
                            {
                                value: 'Shenzhen',
                                label: '深圳'
                            },
                            {
                                value: 'Guangzhou',
                                label: '广州'
                            },
                            {
                                value: 'Dalian',
                                label: '大连'
                            }]
                    }],
                cityValue: "",
                money: [
                    {
                        value: '选项1',
                        label: '1-5万'
                    },
                    {
                        value: '选项2',
                        label: '5-10万'
                    },
                    {
                        value: '选项3',
                        label: '10-15万'
                    },
                    {
                        value: '选项4',
                        label: '15-20万'
                    },
                    {
                        value: '选项5',
                        label: '20-25万'
                    },
                    {
                        value: '选项6',
                        label: '25-30万'
                    },
                    {
                        value: '选项7',
                        label: '30-50万'
                    },
                    {
                        value: '选项8',
                        label: '50-100万'
                    },
                    {
                        value: '选项9',
                        label: '100万以上'
                    }
                ],
                moneyValue: "",
                project: [
                    {
                        label: '热门类目',
                        options: [
                            {
                                value: 'zhongcan',
                                label: '中餐'
                            },
                            {
                                value: 'kuaican',
                                label: '快餐'
                            },
                            {
                                value: 'xiaochi',
                                label: '小吃'
                            },
                            {
                                value: 'mianshi',
                                label: '面食'
                            },
                            {
                                value: 'zhaji',
                                label: '炸鸡'
                            },
                            {
                                value: 'malatang',
                                label: '麻辣烫'
                            },
                            {
                                value: 'suancaiyu',
                                label: '酸菜鱼'
                            },
                        ]
                    },
                    {
                        label: '其他类目',
                        options: [{
                            value: 'tianpin',
                            label: '甜品'
                        },
                            {
                                value: 'yinpin',
                                label: '饮品'
                            },
                            {
                                value: 'huangmenji',
                                label: '黄焖鸡'
                            },
                            {
                                value: 'baozaifan',
                                label: '煲仔饭'
                            }]
                    }],
                projectValue: "",
            }
        },
        components: {
            foot
        }
    }
</script>

<style lang="less">
    #discount {
        /* 头部 */

        .head {
            //width: 100%;
            width: 3.325rem;
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            height: 0.5rem;
            background-color: #fff;
            z-index: 999;

            span {
                position: absolute;
                top: 0.15rem;
                left: 0;
            }

            .title-img {
                width: 1.1rem;
                margin: 0 auto;
                padding-top: 0.15rem;

                a {
                    display: block;
                    width: 100%;
                    height: 100%;

                    img {
                        display: block;
                        width: 100%;
                    }
                }
            }

            &::after {
                content: "";
                position: absolute;
                top: 0;
                left: -0.21rem;
                width: 0.22rem;
                height: 100%;
                background-color: #fff;
                z-index: 9999;
            }

            &::before {
                content: "";
                position: absolute;
                top: 0;
                right: -0.21rem;
                width: 0.22rem;
                height: 100%;
                background-color: #fff;
                z-index: 9999;
            }
        }

        .sel-box {
            position: fixed;
            top: .5rem;
            left: 0;
            z-index: 998;
            background-color: white;
            box-shadow: 0 0 5px rgba(0, 0, 0, .1);
            /* 改变边框颜色 */

            .el-input__inner {
                color: #322a2a;
                padding-left: 35px;
                border: none;
            }
        }

        /* 选中字体颜色 */

        .el-select-dropdown {
            .el-select-dropdown__item {
                float: left !important;
            }
        }

        .el-select-dropdown__item.selected.hover {
            span {
                color: #ff3b3b;
            }
        }

        .el-select-dropdown {
            width: 6.4rem;
        }

        .content-box {
            margin-top: 1.1rem;
            /* 顶部图片 */

            .top-img {
                margin-bottom: 0.15rem;

                a {
                    display: block;
                    width: 100%;
                    height: 100%;

                    img {
                        display: block;
                        width: 100%;
                    }
                }
            }

            /* 热门项目 */

            .hot {
                /* 标题 */

                .hot-title {
                    border-bottom: 1px solid #e1dede;
                    //padding-bottom: 0.15rem;
                    li {
                        display: inline-block;
                        border-bottom: 2px solid #fe1818;
                        padding-bottom: 0.15rem;
                    }
                }

                /* 内容 */

                .hot-cont {
                    li {
                        padding-top: 0.15rem;
                        padding-bottom: 0.135rem;
                        border-bottom: 1px solid #e1dede;
                        position: relative;
                        //display: flex;
                        //justify-content: space-between;

                        img {
                            height: 1.055rem;
                            display: inline-block;
                            margin-right: 0.14rem;
                            vertical-align: middle;
                        }

                        .r-cont {
                            display: inline-block;
                            vertical-align: middle;
                            //font-size: 0;

                            h2 {
                                font-size: 15px;
                                color: #333;
                                display: inline-block;
                                margin-right: 0.05rem;
                                margin-bottom: 0.075rem;
                                margin-top: 0;
                            }

                            span {
                                font-size: 0.11rem;
                                color: #fd8815;
                                padding: 0.02rem 0.03rem;
                                border-radius: 15px;
                                border: solid 1px #ff9126;
                                margin-right: 0.05rem;
                            }

                            p {
                                font-size: 12px;
                                line-height: 12px;

                                &:nth-of-type(1) {
                                    color: #999;
                                }

                                &:nth-of-type(2) {
                                    margin-top: .075rem;
                                    margin-bottom: .075rem;

                                    img {
                                        vertical-align: middle;
                                        width: 12px;
                                        height: 12px;
                                        margin-right: 7px;
                                    }

                                    i {
                                        color: #333;
                                        vertical-align: middle;
                                    }
                                }

                                &:nth-of-type(3) {
                                    color: #ff5050;
                                }
                            }

                            a {
                                display: inline-block;
                                padding: 0.065rem 0.15rem;
                                color: #fff;
                                font-size: 12px;
                                background-image: linear-gradient(207deg,
                                #ff4b33 0%,
                                #ff4431 0%,
                                #ff3d2e 0%,
                                #ff2922 54%,
                                #fe1818 100%),
                                linear-gradient(
                                        #f65353,
                                        #f65353);
                                background-blend-mode: normal,
                                normal;
                                box-shadow: 2px 2px 9px 0px rgba(218, 20, 20, 0.33),
                                inset 0px 3px 7px 0px rgba(255, 88, 75, 0.44);
                                border-radius: 25px;
                                position: absolute;
                                bottom: 0.19rem;
                                right: 0.2rem;
                            }
                        }
                    }
                }

                .load-more {
                    display: block;
                    font-size: 12px;
                    color: #424242;
                    padding: 0.17rem 0;
                    text-align: center;
                }
            }
        }

    }
</style>
